@import "../../../variables";

.exchange {
  flex: 1 1 auto;
  height: 0;
  display: grid;
  grid-template-columns: auto 240px 240px;
  grid-template-rows: auto 40px 240px;
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  margin: 4px;

  &__chart {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 3;

    .module__header__button {
      .icon {
        cursor: pointer;
        margin-left: .5rem;
      }
    }

    &__header-actions {
      @extend %row-nowrap;
      flex: 1 1 auto;
      justify-content: flex-end;
      padding-right: .5rem;
    }

    &__info-icon {
      opacity: .01;
      border-radius: 50%;
      outline: none;

      &--show {
        @extend %clickable;
        @extend %tappable-icon;
        opacity: .5;
      }
    }

    &__subheader {
      background-color: mix($black, $mineshaft-gray, 50);
      padding: 0 .125rem;

      .module__header__button {
        height: calc(100% - 4px);
        margin: .125rem .125rem .125rem 0;
        border-radius: 3px;
      }

      .module__header__button.button--active {
        background-color: mix($black, $mineshaft-gray, 75) !important;
        &:hover,
        &:focus {
          background-color: mix($black, $mineshaft-gray, 75) !important;
        }
      }
    }
  }
}

@import "./order-form";
@import "./depth";
@import "./history";
@import "./list";
